<template>
    <el-row>
        <el-col :span="24">
            <div style="width: 100%;height:1800px;background: #F5F7F9;overflow: hidden"
                 class="grid-content bg-purple-dark">

                <!--设备信息-->
                <div style="width: 65%;height: 340px;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px">
                    <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
                        &nbsp;&nbsp;&nbsp;设备信息
                    </div>
                    <el-form ref="form" :model="form" label-width="100px" style="height: 270px">
                        <div style="margin-top: 30px;margin-left: 30px">
                            <el-form-item label="设备编码">
                                <el-input v-model="form.equipmentNumber" disabled style="width: 300px" size="large"
                                          placeholder="系统自动生成"></el-input>
                            </el-form-item>
                            <el-form-item label="设备名称">
                                <el-input v-model="form.devicename" style="width: 300px" size="large"
                                          placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="规格型号">
                                <el-input v-model="form.specificationsModels" style="width: 300px" size="large"
                                          placeholder="请输入"></el-input>
                            </el-form-item>
                        </div>
                        <div style="margin-top: -40px;margin-left: 550px;position: relative;top: -134px;height: 180px">
                            <el-form-item label="设备类型">
                                <el-cascader
                                        style="width: 300px"
                                        size="large"
                                        value-key="id"
                                        v-model="form.deviceType"
                                        :options="deviceTypes"
                                        :props="propes"

                                        change-on-select
                                ></el-cascader>

                            </el-form-item>
                            <el-form-item label="存放位置">
                                <el-select size="large" style="width: 300px" v-model="form.placeForStorage">
                                    <el-option v-for="(item,index) in PlaceForStorages" :key="index"
                                               :label="item.locationName" :value="item.id"></el-option>
                                </el-select>

                            </el-form-item>

                        </div>
                        <el-form-item label="备注" style="position: relative;top: -140px;left: 30px">
                            <el-input v-model="form.comment" type="textarea" :rows="4" placeholder="请输入"
                                      style="width: 820px"></el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <!--使用情况-->
                <div style="width: 65%;height: 270px;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px">
                    <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
                        <div style="position:relative; left: -90px">
                            使用情况
                        </div>
                        <el-form ref="form" :model="form" label-width="120px">
                            <div style="margin-top: 30px;margin-left: 30px">
                                <el-form-item label="当前状态">
                                    <el-select v-model="form.currentStatus" size="large" style="width: 300px">
                                        <el-option label="正常运行" value=0></el-option>
                                        <el-option label="报废" value=1></el-option>
                                        <el-option label="停用" value=2></el-option>
                                        <el-option label="停机待修" value=3></el-option>
                                        <el-option label="带病运行" value=4></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="负责人">
                                    <el-cascader
                                            style="width: 300px"
                                            size="large"
                                            v-model="form.principal"
                                            :options="PeopleManagement"
                                            :props="props"
                                            expand-trigger="hover"
                                            change-on-select
                                    ></el-cascader>
                                </el-form-item>
                                <el-form-item label="启用日期">
                                    <el-date-picker
                                            v-model="form.activationDate"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            size="large"
                                            style="width: 300px"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                            <div style="margin-top: -40px;margin-left: 550px;position: relative;top: -134px">
                                <el-form-item label="使用部门">
                                    <el-cascader
                                            style="width: 300px"
                                            size="large"
                                            value-key="id"
                                            v-model="form.userDepartment"
                                            :options="departments"
                                            :props="props"
                                            expand-trigger="hover"
                                            change-on-select
                                    ></el-cascader>

                                </el-form-item>
                                <el-form-item label="联系方式">
                                    <el-input v-model="form.phone" style="width: 300px" size="large"
                                              placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="总功率(KW)">
                                    <el-input v-model="form.totalPower" style="width: 300px" size="large"
                                              placeholder="请输入"></el-input>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </div>


                <!--购置信息-->
                <div style="width: 65%;height: 390px;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px">
                    <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 30px">
                        &nbsp;&nbsp;&nbsp;购置信息
                    </div>
                    <el-form ref="form" :model="form" label-width="100px" style="height: 270px">
                        <div style="margin-top: 30px;margin-left: 30px">
                            <el-form-item label="关联采购订单">
                                <el-input v-model="form.purchaseOrder" style="width: 300px" size="large"
                                          placeholder="请选择">
                                    <el-button slot="append" icon="el-icon-s-fold" @click="addRow"></el-button>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="采购部门">
                                <el-cascader
                                        style="width: 300px"
                                        size="large"
                                        placeholder="请选择"
                                        v-model="form.purchasingDepartment"
                                        :options="departments"
                                        :props="props"
                                        expand-trigger="hover"
                                        change-on-select
                                ></el-cascader>
                            </el-form-item>
                            <el-form-item label="采购日期">
                                <el-date-picker
                                        v-model="form.purchaseDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        size="large"
                                        style="width: 300px"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="生产厂商">
                                <el-input v-model="form.manufacturer" style="width: 300px" size="large"
                                          placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="购买价格">
                                <el-input v-model="form.buyingPrice" style="width: 300px" size="large"
                                          placeholder="请输入"></el-input>
                            </el-form-item>
                        </div>
                        <div style="margin-top: -40px;margin-left: 550px;position: relative;top: -253px">
                            <el-form-item label="供应商">
                                <el-select size="large" style="width: 300px" v-model="form.supplier">
                                    <el-option v-for="(item,index) in suppliers" :key="index"
                                               :label="item.supplierName" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="采购人员">
                                <el-cascader
                                        style="width: 300px"
                                        size="large"
                                        placeholder="请选择"
                                        v-model="form.purchasingStaff"
                                        :options="PeopleManagement"
                                        :props="props"
                                        expand-trigger="hover"
                                        change-on-select
                                ></el-cascader>
                            </el-form-item>
                            <el-form-item label="出厂日期">
                                <el-date-picker
                                        v-model="form.productionDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        size="large"
                                        style="width: 300px"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="使用寿命(年)" style="position: relative;top: 10px">
                                <el-input-number v-model="form.serviceLife" controls-position="right"
                                                 style="width: 300px" @change="handleChange" size="large" :min="1"
                                                 :max="9999"></el-input-number>
                            </el-form-item>
                        </div>

                    </el-form>
                </div>

                <!--设备图片-->
                <div style="width: 65%;height: 250px;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px;">
                    <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 25px">
                        &nbsp;&nbsp;&nbsp;设备图片
                    </div>
                    <el-upload
                            class="upload-demo"
                            action="http://localhost:8090/spare/api/upload"
                            :multiple="true"
                            :on-success="handleSuccess"
                            :before-upload="beforeUpload"
                            :headers="headers"
                            :data="data"
                            :limit="limit"
                            :on-exceed="handleExceed"
                            :on-remove="handleRemove"
                            :auto-upload="false"
                            :show-file-list="false"
                            :on-change="handleChanges"
                    >
                        <el-button size="small" type="primary"
                                   style="margin-left: 20px;margin-top: 10px;position: relative;left: -645px">点击上传
                        </el-button>
                        <ul style="list-style: none">
                            <li style="float: left" v-for="(url, index) in form.imgList" :key="index">
                                <img :src="url.url" style="width: 100px;height: 100px;margin-left: 20px">
                            </li>
                        </ul>

                    </el-upload>
                </div>

                <!--关联文档-->
                <div style="width: 65%;height: 200px;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px">
                    <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
                        &nbsp;&nbsp;&nbsp;关联文档
                    </div>
                    <div>
                        <el-upload
                                class="upload-demo"
                                action="http://localhost:8090/spare/api/uploadFile"
                                :multiple="true"
                                :on-success="handleSuccesss"
                        >
                            <el-button size="small" type="primary" style="position: relative;left: 18px;top: 10px">
                                点击上传
                            </el-button>
                        </el-upload>
                        <el-table :data="form.fileList" style="width: 100%;margin-top: 10px ">
                            <el-table-column prop="name" label="文件名" align="center"></el-table-column>
                            <el-table-column prop="url" label="文件URL" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <!--弹出采购订单列表-->
                <el-dialog :visible.sync="dialogVisible" title="选择采购订单">
                    <el-form :model="Deviceprocure" label-width="80px">
                        <el-form-item label="采购单号">
                            <el-input
                                    placeholder="请输入采购单号"
                                    v-model="Deviceprocure.deCode"
                                    style="width: 200px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="采购日期">
                            <el-date-picker
                                    v-model="Deviceprocure.deTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    style="width: 200px"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="采购部门">
                            <el-cascader
                                    style="width: 200px"
                                    v-model="Deviceprocure.departmentId"
                                    :options="departments"
                                    :props="props"
                                    expand-trigger="hover"
                                    change-on-select
                            ></el-cascader>
                        </el-form-item>
                        <div style="position:relative; left: 300px;top: -95px">
                            <el-form-item label="采购人员">
                                <el-cascader
                                        style="width: 200px"
                                        v-model="Deviceprocure.dePersonid"
                                        :options="PeopleManagement"
                                        :props="props"
                                        expand-trigger="hover"
                                        change-on-select
                                ></el-cascader>
                            </el-form-item>
                            <el-form-item label="供应商">
                                <el-input v-model="Deviceprocure.supplierId" style="width: 200px"
                                          placeholder="请选择">
                                    <el-button slot="append" icon="el-icon-s-fold" @click=""></el-button>
                                </el-input>
                            </el-form-item>
                        </div>
                        <div style="position: relative;left: 550px;top:-140px">
                            <el-form-item>
                                <el-button type="primary" @click="submitForm">提交</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                    <div style="position:relative;top: -140px">
                        <el-table :data="DeviceprocureData" style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" align="center"></el-table-column>
                            <el-table-column prop="deId" label="序号"></el-table-column>
                            <el-table-column prop="deCode" label="采购单号" align="center"></el-table-column>
                            <el-table-column prop="deTheme" label="采购主题 " align="center"></el-table-column>
                            <el-table-column prop="deTime" label="采购日期" align="center"></el-table-column>
                            <el-table-column prop="departmentName" label="采购部门" align="center"></el-table-column>
                            <el-table-column prop="personName" label="采购人员" align="center"></el-table-column>
                            <el-table-column prop="supplierName" label="供应商" align="center"></el-table-column>
                            <el-table-column prop="deName" label="采购设备" align="center"></el-table-column>
                        </el-table>
                        <!--分页-->
                        <el-pagination
                                :current-page.sync="Deviceprocure.page"
                                :page-size="Deviceprocure.pagesize"
                                :page-sizes="[10, 20, 30, 40]"
                                :total="DevTotal"
                                background
                                layout="total, sizes ,prev, pager, next, jumper"
                                style="padding: 30px 0; text-align: center"
                                @current-change="selDeviceprocure"
                                @size-change="handleSizeChanges"
                        />
                        <el-button type="primary" @click="dialogVisible =false"
                                   style="position: relative;top: 100px;float: right">确认
                        </el-button>
                        <el-button @click="no" style="position: relative;top: 100px;left:-30px;float: right">取消
                        </el-button>
                    </div>
                </el-dialog>

                <!--最下面-->
                <div style="width: 100%;height: 50px;background: white;box-shadow: 0px -4px 4px rgb(226,228,229);position:fixed;top: 820px;z-index: 999">
                    <div style="margin-left: 700px;margin-top: 15px">
                        <el-button @click="closes">关闭</el-button>
                        <el-button type="success" @click="addEquipmentArchives()">确认</el-button>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            //添加表单数据
            form: {
                equipmentNumber: '',
                devicename: '',//设备名称
                specificationsModels: '',//规格型号
                deviceType: '',
                placeForStorage: '',
                comment: '',
                currentStatus: '',
                userDepartment: '',
                principal: '',
                phone: '',
                activationDate: '',
                totalPower: '',
                purchaseOrder: '',
                supplier: '',
                purchasingDepartment: '',
                purchasingStaff: '',
                purchaseDate: '',
                productionDate: '',
                manufacturer: '',
                serviceLife: '',
                buyingPrice: '',
                association: [],
                imgList: [],
                fileList: []
            },
            //供应商管理信息数据
            suppliers: [],
            //人员管理树形信息数据
            PeopleManagement: [],
            //部门树形数据
            departments: [],
            //树形设备类型
            deviceTypes: [],
            //设备存放位置信息
            PlaceForStorages: [],
            propes: {
                value: 'id',
                label: 'typeName',
                children: 'children'
            },
            props: {
                value: 'departmentManagementId',
                label: 'departmentName',
                children: 'children'
            },
            //采购订单查询模糊查分页数据
            Deviceprocure: {
                deCode: null,
                departmentId: null,
                dePersonid: null,
                supplierId: null,
                deTime: null,

                page: 1,
                pageSize: 10
            },
            DevTotal: 0,
            //采购订单信息
            DeviceprocureData: [],

            vals: [],
            limit: 10,
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            data: {
                type: 'image'
            }
        }
    },
    methods: {
        closes() {
            this.$router.push('/EquipmentArchives')
        },

        //添加设备信息
        addEquipmentArchives() {
            this.request.post("/device/equipment-archives/addEquipmentArchives", this.form)
                .then(res => {
                    this.$message({
                        showClose: true,
                        message: '添加成功',
                        type: 'success'
                    });
                    this.$router.push('/EquipmentArchives')
                })
        },
        handleSuccesss(response, file) {
            console.log(response)
            this.form.fileList.push({
                name: file.name,
                url: response[0]
            })
        },
        handleDelete(row) {
            this.$confirm(`确定删除文件 ${row.name} 吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.form.fileList.splice(this.form.fileList.indexOf(row), 1)
                this.$message.success('删除成功')
            })
        },
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt500K = file.size / 1024 < 500

            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG/PNG 格式!')
            }
            if (!isLt500K) {
                this.$message.error('上传图片大小不能超过 500KB!')
            }
            return isJPG && isLt500K
        },
        handleSuccess(response, file) {
            const url = response.data
            this.form.bpush({
                name: file.name,
                url: url
            })
        },
        handleExceed(files) {
            this.$message.warning(`当前限制选择 ${this.limit} 张图片，本次选择了 ${files.length} 张图片，已经选择了 ${this.form.imgList.length} 张图片`)
        },
        handleRemove(file) {
            const index = this.form.imgList.indexOf(file)
            this.form.imgList.splice(index, 1)
        },
        associationSelection(vals) {
            this.vals = vals
        },

        //提交
        submitForm() {

        },
        //查询关联订单列表
        addRow() {
            this.dialogVisible = true
            this.selDeviceprocure()
        },

        //查询供应商信息
        selAllSuppliers() {
            this.request.get("/system/supplier-management/selAllSuppliers")
                .then(res => {
                    this.suppliers = res.data
                })
        },
        //树形查询设备类型
        selAllDeviceType() {
            this.request.get("/device/device-type/selDevice")
                .then(res => {
                    this.deviceTypes = res.data
                })
        },
        //树形查询部门信息
        selAllDepartments() {
            this.request.get("/system/department-management/selAllDepartments")
                .then(res => {
                    this.departments = res.data
                })
        },
        //查询设备存放位置
        selAllStorages() {
            this.request.get("/device/place-for-storage/queryAll")
                .then(res => {
                    this.PlaceForStorages = res.data
                })
        },

        //列表分页跳转数据
        handleSizeChanges(pageSize) {
            this.Deviceprocure.pagesize = pageSize;
            this.selDeviceprocure();
        },
        handleChange(value) {
            console.log(value)
        },
        handleSelectionChange(rows) {
            this.form.purchaseOrder = rows[0].deCode
            this.form.purchasingDepartment = rows[0].departmentId
            this.form.purchaseDate = rows[0].deTime
            this.form.supplier = rows[0].supplierId
            this.form.purchasingStaff = rows[0].dePersonid
            this.form.buyingPrice = rows[0].dePrice


        },

        no() {

        },
        handleChanges(file) {
            if (file.status === 'ready') {
                const reader = new FileReader()
                reader.readAsDataURL(file.raw)
                reader.onload = () => {
                    const data = {
                        base64: reader.result
                    }
                    this.request.post('/spare/api/upload', data).then(response => {
                        const url = response.data
                        this.form.imgList.push({
                            name: file.name,
                            url: url
                        })
                    })
                }
            }
        }
    },
    created() {
        this.selAllDeviceType()
        this.selAllStorages()
        this.selAllDepartments()
        this.selAllSuppliers()

    },
}
</script>

<style scoped>

</style>
